<template>
	<view class="login-container">
		<view class="login-header">
			<text class="title">沧洲师范学院</text>
			<text class="subtitle">——线上教育计划</text>
		</view>

		<view class="login-content">
			<view class="login-form">
				<view class="form-item">
					<view class="input-wrapper">
						<view class="ic">
							<uni-icons type="contact" size="30"></uni-icons>
						</view>
						<input v-model="loginForm.username" type="text" placeholder="请输入账号" class="input" />
					</view>
				</view>
				<view class="form-item">
					<view class="input-wrapper">
						<view class="ic">
							<uni-icons type="locked" size="30"></uni-icons>
						</view>
						<input v-model="loginForm.password" type="password" placeholder="请输入密码" class="input" />
					</view>
				</view>
				<button class="login-btn" @tap="handleLogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		apiLogin,
		apiVerifyToken
	} from '../../api/apis';

	const loginForm = reactive({
		username: "",
		password: ""
	});

	onMounted(() => {
		uni.getStorage({
			key: 'token',
			success: async (res) => {
				const token = res.data;
				try {
					const verifyRes = await apiVerifyToken({
						token
					});
					if (verifyRes.code === 0) {
						uni.switchTab({
							url: '/pages/index/index'
						});
					} else {
						uni.removeStorage('token');
						uni.removeStorage('studentInfo');
						uni.showToast({
							title: '登录已过期，请重新登录',
							icon: 'none',
							duration: 2000,
						});
					}
				} catch (error) {
					console.error('验证 token 时发生错误:', error);
				}
			},
			fail: () => {
				console.log('未找到 token，停留在登录页面');
			},
		});
	});

	const handleLogin = () => {
		const getDayRandom = async () => {
			let res = await apiLogin(loginForm);
			if (res.code === 0) {
				uni.setStorage({
					key: 'studentInfo',
					data: res.data.studentVO,
				});
				uni.setStorage({
					key: "token",
					data: res.data.token
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 2000
				});
			}
		};
		getDayRandom();
	};
</script>

<style lang="scss">
	.login-container {
		min-height: 100vh;
		padding: 60rpx 100rpx 100rpx; // 增加顶部的 padding，使整体向下移动
		background: #ffffff; // 背景改为纯白色
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; // 添加垂直居中
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 0 40rpx; // 减少上方的间距，适配居中布局
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		color: #47a3da;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	}

	.subtitle {
		font-size: 36rpx;
		color: #47a3da;
		margin-top: 10rpx;
	}

	.login-content {
		margin-top: 20rpx; // 减少间距
		padding: 0 20rpx;
	}

	.login-form {
		width: 100%;
		max-width: 650rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.form-item {
		margin-bottom: 25rpx;
		width: 100%;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: 45rpx;
		background: #ffffff;
		padding: 15rpx 25rpx;
		box-shadow: 0 4px 10px rgba(158, 220, 207, 0.4); // 添加阴影效果
		transition: all 0.3s ease;
	}

	.input-wrapper:focus-within {
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); // 聚焦时增加阴影
		border-color: #5fb8a8; // 聚焦时边框颜色
	}

	.ic {
		margin-right: 15rpx;
		color: #888;
	}

	.input {
		width: 100%;
		height: 90rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #34495e;
		border: none;
		background: transparent;
	}

	.input::placeholder {
		color: #aaa;
	}

	.remember-password {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #888;
	}

	.checkbox {
		margin-right: 10rpx;
	}

	.login-btn {
		background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
		width: 100%;
		height: 96rpx;
		border-radius: 48rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		margin-top: 30rpx;
		box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
		border: none;
		transition: all 0.3s ease;
		line-height: 96rpx;
	}

	.login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2px 8px rgba(110, 142, 251, 0.3);
		background: linear-gradient(135deg, #5d7dfa 0%, #3959f6 100%);
	}

	.login-btn:disabled {
		background: linear-gradient(135deg, #a5b4fb 0%, #8497f7 100%);
		opacity: 0.7;
		box-shadow: none;
	}
</style>